import React, {
    Component,
} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {
    StyleSheet,
    View,
    Text,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    StatusBar,
    ScrollView, DeviceEventEmitter,
    TextInput
} from 'react-native';

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
import { ToastToUser } from "../../utils/CustomToast";

// 一些常量设置
const isIos = Platform.OS == 'ios';

export default class TextInputBox extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.framebox}>
                    <View style={styles.titlebox}>
                        <Text style={styles.titletext}>{this.props.title}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                        <View style={styles.baildes}>
                            <TextInput
                                editable={true}
                                keyboardType='decimal-pad'
                                placeholder={this.props.placeholder}
                                placeholderTextColor='#cccccc'
                                style={styles.textInput}
                                onChangeText={this.onChangeTextHandle}
                            />
                            <Text style={styles.bailtitle}>{this.props.unitDes}</Text>
                        </View>
                    </View>

                    {
                        this.props.btndescribe
                            ?
                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={this.sure}
                                style={styles.bottombox}>
                                <View style={styles.bottombox}>
                                    <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                                        colors={['#FFA502', '#FD720D']}
                                        style={styles.btnbox}>
                                        <Text style={styles.btntext}>{this.props.btndescribe}</Text>
                                    </LinearGradient>
                                </View>
                            </TouchableOpacity>
                            :
                            null
                    }

                </View>
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={this.close}
                    style={styles.closebox}>
                    <Image source={{ uri: 'pop_close' }} style={styles.closeimg} />
                </TouchableOpacity>
            </View>
        );

    }

    constructor(props) {
        super(props);
        this.state = {
            changeValue: '',
        }
    };

    close = () => {
        if (this.props.onClosepop) {
            this.props.onClosepop();
        }
    }

    sure = () => {
        if (!this.state.changeValue || parseFloat(this.state.changeValue) <= 0) {
            ToastToUser('请输入' + this.props.title)
            return;
        }
        if (this.props.sureHandler) {
            this.props.sureHandler(this.state.changeValue);
        }
    }


    onChangeTextHandle = (value) => {
        // const value1 = value.replace(/[^\d]+/, '');
        this.setState({ changeValue: value });
    }



    componentWillMount() {

    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        height: screenH,
        backgroundColor: 'rgba(0,0,0,0.6)',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    framebox: {
        width: '74%',
        backgroundColor: '#ffffff',
        borderRadius: 6,
        marginTop: -40
    },
    titlebox: {
        height: 56,
        backgroundColor: '#f9f9f9',
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    titletext: {
        fontSize: 17,
        fontWeight: "bold",
        color: '#333333',
    },
    bottombox: {
        borderBottomLeftRadius: 6,
        borderBottomRightRadius: 6,
        borderTopColor: '#e4e4e4',
        borderTopWidth: 0.3,
        height: 75,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnbox: {
        minWidth: 138,
        height: 40,
        borderRadius: 20,
        paddingLeft: 30,
        paddingRight: 30,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btntext: {
        color: '#ffffff',
        fontSize: 15,
        fontWeight: "bold",
    },
    closeimg: {
        width: 34,
        height: 34,
        marginTop: 30,
    },
    recordlistbox: {
        height: 280,
    },
    listbox: {
        marginBottom: 15
    },
    infobox: {
        paddingLeft: 5,
        paddingRight: 20,
        marginTop: 7,
        marginBottom: 7,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    commenfont: {
        textAlign: 'center',
        fontSize: 14,
        color: '#333333',
    },

    commenfont1: {
        textAlign: 'center',
        fontSize: 14,
        color: '#999999',
    },

    commenfont2: {
        textAlign: 'center',
        fontSize: 12,
        color: '#333333',
    },

    commenfont3: {
        textAlign: 'center',
        fontSize: 12,
        color: '#999999',
    },

    commenfonts: {
        textAlign: 'center',
        fontSize: 14,
        color: '#999999',
    },
    result: {
        width: '18%',
    },
    number: {
        width: '18%',
    },
    price: {
        width: '34%',
    },
    time: {
        width: '35%',
    },

    bailbox: {
        marginTop: 20,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around',
    },
    baildes: {
        marginTop: 25,
        marginBottom: 20,
        flexDirection: 'row',
        alignItems: 'center',
        width: '80%',
        height: 40,
        justifyContent: 'flex-start',
        backgroundColor: "#f6f6f6",
        borderRadius: 4,
    },
    bailtitle: {
        position: 'absolute',
        right: 12,
        fontSize: 15,
        color: '#333333',
    },
    bailmoney: {
        fontSize: 18,
        color: '#ff6600',
    },
    bailrest: {
        marginTop: 14,
        paddingRight: 23,
        paddingLeft: 23,
        marginBottom: 30,
        fontSize: 12,
        width: "100%",
        color: '#999999',
        textAlign: 'left',
        lineHeight: 20,
    },

    noticebox: {
        marginTop: 40,
        marginBottom: 40,
    },
    noticedes: {
        marginLeft: 20,
        marginRight: 20,
        fontSize: 15,
        color: '#333333',
        textAlign: 'center',
    },

    noreaction: {
        marginTop: 50,
        marginBottom: 50,
    },
    noreactdes: {
        textAlign: 'center',
        fontSize: 15,
        color: '#333333',
    },
    chujiatitle: {
        fontSize: 15,
        color: "#333333",
        marginTop: 5,
    },
    chujiaprice: {
        marginLeft: 3,
        fontSize: 24,
        fontWeight: "bold",
        color: "#333333",
    },
    rechargedes: {
        width: "100%",
        fontSize: 11,
        color: "#333333",
        marginTop: 15,
        paddingRight: 23,
        paddingLeft: 23,
        marginBottom: 20,
        textAlign: 'left',
        lineHeight: 16,
    },
    textInput: {
        marginLeft: 0,
        paddingLeft: 15,
        fontSize: 14,
        color: '#333333',
        height: 38,
        width: '60%',
        alignItems: 'center',
    },
    openVipBox: {
        borderBottomLeftRadius: 6,
        borderBottomRightRadius: 6,
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    openVipText: {
        fontSize: 15,
        color: '#ff6600',
    }
});
